<template>
    <view>
        <img :src="detailsData.xiangmu_fengmian_img" style="width: 100%; height:300upx;background:#f0f0f0">
        <view class="between-center">
            <img src="" style="width: 150upx; height:150upx;background:#f0f0f0;border-radius:50%">
            <view class="avator between-center">
                <view class="avator_title">
                    <view >{{ detailsData.fullname }} </view>
                    <view style="font-size: 24upx; font-weight:300">标签1</view>
                </view>
                <view class="avator_level" @click.stop="handleMainCollect(item)">
                    <u-icon name="star"></u-icon>
                    <view  >关注</view>
                </view>

            </view>
            
        </view>
        <view>
            <view class="flex report">
               {{ detailsData.smalltext }}
            </view>
            <view style="padding: 0upx 20upx" class="report_time">
                <view>合作金额<text>{{detailsData.hezuo_money}}</text></view>
                <view><text>11128人</text>有合作意向</view>
            </view>
        </view>
       
        <view style="padding: 0upx 10px;">
            <pageTitle title="相关视频"></pageTitle>
            <u-scroll-list :indicator="false">
                <view v-for="(item, index) in 6" :key="index" style="margin-right: 20upx;">
                    <image :src="item.xiangmu_jieshao_video" style="background:#f0f0f0;width:150upx;height:150upx" ></image>
                    <view style="font-size: 20upx;">项目背景</view>
                </view>
            </u-scroll-list>
            <pageTitle title="企业信息"></pageTitle>
            <view class="align-center">
                <u-avatar :src="src" size="50"></u-avatar>
                <view class="avator between-center">
                    <view>
                        <view >{{detailsData.user_name}}<text style="font-size: 24upx; font-weight:300">/{{detailsData.user_title}}</text> </view>
                        <view style="font-size: 24upx; font-weight:300">{{detailsData.qiye_name}}</view>
                    </view>
                </view>
                
                
            </view>
            <view class=" report_content">
                <view>公司名称：{{detailsData.qiye_name}}</view>
                <view>注册资金：10000万</view>
                <view>城市总部：湖州</view>
                <view>项目成立年份：2011年</view>
            </view>
            <view class="title">行业前景</view>
            <img src="" style="width: 100%; height:300upx;background:#f0f0f0">
            <view class="title">项目优势</view>
            <img src="" style="width: 100%; height:300upx;background:#f0f0f0">
            <pageTitle title="项目推荐"></pageTitle>
            <mainList :baseList="topCompanyBasicList" />
        </view>
        <view class="fixedTab">
            <view class="flex fixedTab_icon">
                <u-icon name="phone" size="24"></u-icon>
                <u-icon name="star" size="24"></u-icon>
            </view>
            
            <view class="fixedTab_btn">
                <u-button type="primary">我感兴趣</u-button>
            </view>
           
        </view>

    </view>
</template>

<script>
import mainList from '@/components/mainList/index.vue'
import uTabs from '@/components/uTabs/index.vue'
import pageTitle from '@/components/pageTitle.vue'
import { onShow } from '@dcloudio/uni-app'
export default {
    components: {
        mainList,
        uTabs,
        pageTitle
    },
    data() {
        return {
            array: ['中国', '美国', '巴西', '日本'],
            index: 0,
            detailsData:{},
            tabBasicList: [
                {
                    name: '2024'
                },
                {
                    name: '2023'
                },
                {
                    name: '2022'
                },
                {
                    name: '其他'
                }
            ],
            checkboxValue1: [],
            // 基本案列数据
            checkboxList1: [{
                name: '独角兽',
                disabled: false
            },
            {
                name: '隐形独角兽',
                disabled: false
            },
            {
                name: '其他',
                disabled: false
            }
            ],
            topCompanyBasicList: [
                {
                    id: 0,
                    title: '2024年度全球独角兽企业500强大会',
                    desc: '企业简介企业简介企业简介',
                    tag: '企业标签',
                    slot: ''
                },
                {
                    id: 1,
                    title: '2024年度全球独角兽企业500强大会',
                    desc: '企业简介企业简介企业简介',
                    tag: '企业标签',
                    slot: ''
                },
                {
                    id: 2,
                    title: '2024年度全球独角兽企业500强大会',
                    desc: '企业简介企业简介企业简介',
                    tag: '企业标签',
                    slot: ''
                }
            ],
        }
    },
    onShow() {
        const eventChannel = this.getOpenerEventChannel();
        eventChannel.on('acceptDataFromSourcePage',  (data) => {
            this.id = data.param.id
            this.getDetails(data.param.id)
        });
    },
    methods: {
        async getDetails (id){
            const res = await this.$api.getProjectDetails({id})
            this.detailsData = res
        },
        async handleMainCollect(){
                const res = await this.$api.addCollect({
                    id:this.detailsData.id,
                    category:'product_xiangmu'
                })
                global.showToast('收藏成功')
            }
    },
}
</script>

<style scoped lang="scss">
.desc {
    margin-top: 20upx;
    font-size: 24upx;
    color: #666;
    margin-bottom: 20upx;
    background: #E5EFFF;
    padding: 20upx;
}
.report{
    border-top: 1px solid #f0f0f0;
    border-bottom:  1px solid #f0f0f0;
    padding: 10upx 20upx;
    font-size: 28upx;
    margin-top: 20upx;
    >view{
        width: 50%;
    }
}
.report_content{
    background: #f0f0f0; 
        margin: 20upx 10upx;
        padding: 10upx 20upx;
        border-radius: 10upx;
        font-size: 22upx;
        color: #999;
        >ul{
            margin-left: 10upx;
        }
}
.report_time{
    font-size: 24upx;
    >view{
        margin-bottom: 20upx;
    }
    text{
        color: red;
    }
}
.avator {
    flex: 1;
    margin-left: 20upx;
    font-size: 32upx;
    padding-right: 20upx;
    .avator_level {
        font-size: 24upx;
        align-self: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .avator_title{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
}
.title{
    font-size: 28upx;
    margin: 20upx 0upx;
}
.fixedTab{
    position: fixed;
    bottom: 0;
    display: flex;
    width: 100%;
    background-color: white;
    &_btn{
        flex: 1;
    }
    &_icon{
        width: 150upx;
        justify-content: space-around;
    }
}
</style>